<template>
    <!--搜索-->
    <div>
        <el-card class="box-card" style="height: 850px">
<!--            <el-card class="box-card">-->
                <div>
                    <el-form :inline="true" :model="query" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="query.cardName" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="queryData">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
<!--            </el-card>-->
            <div class="interspaceH"></div>
            <!--数据列表-->
            <el-card class="box-card" style="height: 690px">
                <div>
                    <el-button type="primary" @click="tianjia">+ 添加员工名片</el-button>
                    <div class="interspaceH"></div>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="cardName" label="姓名" width="">
                        </el-table-column>
                        <el-table-column prop="cardJob" label="职务">
                        </el-table-column>
                        <el-table-column prop="cardPhone" label="手机号" width="">
                        </el-table-column>
                        <el-table-column prop="cardEmail" label="邮箱">
                        </el-table-column>
                        <el-table-column prop="cardAddress" label="地区">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="250">
                            <template slot-scope="scope">
                                <el-button type="text" @click="view(scope.$index, scope.row)">详情</el-button>
                                <el-button type="text" @click="edits(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="text" @click="shanchu(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                   @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                   :current-page="pagePagination.currentPage"
                                   :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="pagePagination.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-card>
        <!--添加员工名片-->
        <div>
            <el-dialog :title="titles" :visible.sync="add" width="30%" :close-on-click-modal="false">
                <el-form label-width="120px" :model="createData" ref="editForm">
                    <el-form-item label="姓名" prop="cardName" required>
                        <el-input size="small" v-model="createData.cardName"></el-input>
                    </el-form-item>
                    <el-form-item label="职务" prop="cardJob" required>
                        <el-select v-model="createData.cardJob" placeholder="选择职务" style="width: 287px" >
                            <el-option v-for="item in job" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号" prop="cardPhone" required>
                        <el-input size="small" v-model="createData.cardPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="cardEmail">
                        <el-input size="small" v-model="createData.cardEmail"></el-input>
                    </el-form-item>
                    <el-form-item label="地区" prop="cardAddress">
                        <el-input size="small" v-model="createData.cardAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="公司" prop="cardCompany">
                        <el-input size="small" v-model="createData.cardCompany"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="closeDialog">取消</el-button>
                    <el-button size="small" type="primary" class="title" @click="submit">添加
                    </el-button>
                </div>
            </el-dialog>
        </div>
        <!--详情-->
        <div>
            <el-dialog :title="title" :visible.sync="views" width="30%" :close-on-click-modal="false">
                <el-form label-width="120px" :model="viewData" ref="editForm" disabled>
                    <el-form-item label="姓名" prop="name">
                        <el-input size="small" v-model="viewData.cardName"></el-input>
                    </el-form-item>
                    <el-form-item label="职务" prop="name">
                        <el-input size="small" v-model="viewData.cardJob"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="name">
                        <el-input size="small" v-model="viewData.cardPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="name">
                        <el-input size="small" v-model="viewData.cardEmail"></el-input>
                    </el-form-item>
                    <el-form-item label="地区" prop="name">
                        <el-input size="small" v-model="viewData.cardAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="公司" prop="name">
                        <el-input size="small" v-model="viewData.cardCompany"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="name">
                        <el-input size="small" v-model="viewData.cardStatus"></el-input>
                    </el-form-item>
                </el-form>
                <!--<div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="closeDialog">返回</el-button>
                </div>-->
            </el-dialog>
        </div>
        <!--编辑-->
        <div>
            <el-dialog :title="updates" :visible.sync="update" width="30%" :close-on-click-modal="false">
                <el-form label-width="120px" :model="updateData" ref="editForm">
                    <el-form-item label="姓名" prop="cardName">
                        <el-input size="small" v-model="updateData.cardName"></el-input>
                    </el-form-item>
                    <el-form-item label="职务" prop="cardJob">
                        <el-select v-model="updateData.cardJob" placeholder="选择职务" style="width: 287px">
                            <el-option v-for="item in job" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号" prop="cardPhone">
                        <el-input size="small" v-model="updateData.cardPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="cardEmail">
                        <el-input size="small" v-model="updateData.cardEmail"></el-input>
                    </el-form-item>
                    <el-form-item label="地区" prop="cardAddress">
                        <el-input size="small" v-model="updateData.cardAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="公司" prop="cardCompany">
                        <el-input size="small" v-model="updateData.cardCompany"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="cardCompany">
                        <el-input size="small" v-model="updateData.cardStatus"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="closeDialog">取消</el-button>
                    <el-button size="small" type="primary" class="title" @click="edit">保存
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';


    export default {
        data() {
            return {
                title: '员工名片详情',
                titles: '添加员工名片',
                updates: '编辑员工命名',
                job:'',
                add: false,
                views: false,
                update: false,
                query:{
                    cardName:''
                },
                createData:{},//创建数据
                updateData:{},//修改数据
                viewData:{},//数据详情
                tableData: [],
                formInline: {
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },

                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
            }
        },
        mounted() {
            // this.queryDataHandle(1,10)
            this.queryData()
        },
        methods: {
            queryData(){
                let that = this;
                let payload = {
                    cardName:this.query.cardName,
                    pageNum: this.pagePagination.currentPage,
                    pageSize: this.pagePagination.pageSize,
                }
                that.$request("/card/byCard", payload, "POST").then((data) => {
                    that.tableData = data.data.data
                    that.pagePagination['total'] = data.data.total
                    that.pagePagination['pageSize'] = that.pagePagination.pageSize
                })
            },
            submit() {
                if (this.createData.cardName == null || this.createData.cardName == undefined || this.createData.cardName == ''){
                    this.$message({
                        message: '请输入姓名',
                        type: 'error'
                    })
                    return
                }else if (this.createData.cardJob == null || this.createData.cardJob == undefined || this.createData.cardJob == ''){
                    this.$message({
                        message: '请选择职务',
                        type: 'error'
                    })
                    return
                }else if (this.createData.cardPhone == null || this.createData.cardPhone == undefined || this.createData.cardPhone == ''){
                    this.$message({
                        message: '请输入手机号',
                        type: 'error'
                    })
                    return
                }
                this.$request('/card/add',this.createData, 'POST').then((data) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.queryData()
                })
                this.closeDialog()
            },
            closeDialog() {
                this.add = false,
                this.views = false,
                this.update = false
            },
            tianjia(index,row) {
                this.add = true
                this.$request('/emps/getAllJop', 'get').then((data) => {
                    const job = data.data;
                    // console.log(Object.keys(job))
                   this.job=Object.keys(job)
                })
                this.createData = {}
            },
            view(index,row) {
                this.viewData = row
                this.views = true
            },
            edits(index,row) {
                this.updateData = row
                this.update = true
                this.$request('/emp/getAllJop', 'get').then((data) => {
                    const job = data.data;
                    // console.log(Object.keys(job))
                   this.job=Object.keys(job)
                })
            },
            edit() {
                this.$request('/card/update',this.updateData, 'POST').then((data) => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.queryData()
                })
                this.closeDialog()
            },
            shanchu(index,row) {
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$request('/card/delete/'+row.businessCardId, '', 'DELETE').then((data) => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.queryData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // // 分页插件事件
            // queryDataHandle(page = 1, row = 10) {
            //     let that = this;
            //     let payload = {
            //         pageNum: page,
            //         pageSize: row
            //     }
            //     that.$request("/card/byCard", payload, "POST").then((data) => {
            //         that.tableData = data.adta
            //         that.pagePagination['total'] = data.data.total
            //         that.pagePagination['pageSize'] = row
            //     })
            // },
        }
    }
</script>

<style scoped>

</style>
